<template>
    <div class="home">
        <!-- Vue3 新增组件 => 将<teleport>组件包裹的内容,传递到指定元素 -->
        <!-- <teleport  to='.header'>
            <van-nav-bar class="home-header">
                <template #title>
                    <van-search class="search" shape="round" placeholder="搜索.." background="transparent" />
                </template>
                <template #left>
                    <van-icon
                        name="" />
                </template>
                <template #right>
                    <van-icon
                        name="" />
                </template>
            </van-nav-bar>
        </teleport> -->
        <CommonHeader  class="home-header" style="font-size:20px" teleport=".header"  right-text="登录" @click-left="$router.push('/category')" @click-right="$router.push('/login')">
            <template #title>
                <van-search class="search" shape="round" placeholder="搜索.." background="transparent" />
            </template>
            <template #left>
                <van-icon
                    name="" />
            </template>
            <template #right>
                <van-icon
                    name="" />
            </template>
        </CommonHeader>


        <!-- <span>{{ !bannerList }}</span> -->
        <van-skeleton :loading="!bannerList">
            <!-- 模版 -->
            <template #template>
                <van-skeleton-image image-size="355" style="height:133px" />
            </template>
            <!-- 实际内容的default -->
            <template #default>
                <van-swipe class="banner" :loop="true" :autoplay="2000">
                    <template v-for="item in bannerList">
                        <van-swipe-item v-if="item.flag" :key="item.bannerid">
                            <img :src="item.img" alt="">
                        </van-swipe-item>
                    </template>
                </van-swipe>
            </template>
        </van-skeleton>

        <van-grid class="home-guild" :column-num="5" :gutter="10" square>
            <van-grid-item v-for="value in 10" :key="value" icon="photo-o" text="文字"></van-grid-item>
        </van-grid>

        <van-list class="list" ref="one" v-model:loading="loading" :finished="finished" finished-text="没有更多了"
            loading-text="加载中" @load="onLoad" :immediate-check="false">
            <div class="list-item" v-for="item in proList" :key="item.proid">
                <RouterLink :to="{path:'/detail',query:{proid:item.proid}}">
                    <van-image width="172" height="172" :src="item.img1" />
                    <van-text-ellipsis rows="2" :content="item.proname" />
                    <van-row>
                        <van-space>
                            <van-tag type="primary">{{ item.category }}</van-tag>
                            <van-tag type="primary">{{ item.brand }}</van-tag>
                        </van-space>
                    </van-row>
                    <van-row>
                        <van-space>
                            <van-tag type="danger">{{ (item.originprice * item.discount / 10).toFixed(2) }}</van-tag>
                        </van-space>
                    </van-row>
                </RouterLink>
            </div>
        </van-list>
    </div>
</template>

<script setup lang="ts">

import type { Ref } from "vue"
import { ref, reactive, onMounted } from "vue"
import { showSuccessToast, showFailToast } from "vant";
import { RouterLink } from "vue-router";

import CommonHeader from "@/components/CommonHeader.vue";


import { getBannerListAPI } from "@/api/banner"
import { getProListAPI } from "@/api/product"



let bannerList: Ref<any> = ref(null);
let proList: Ref<any> = ref([]);

let pageParams = reactive<PageRaw>({
    count: 1,
    limitNum: 10
})

let loading = ref<boolean>(false);
let finished = ref<boolean>(false);

let one = ref(null);


let getBannerList = async () => {
    try {
        let result = await getBannerListAPI();
        console.log("轮播请求成功", result);

        bannerList.value = result.data;
    } catch (err: any) {
        showFailToast(err.message);
    }
}

let getProList = async () => {
    try {
        let result = await getProListAPI(pageParams);
        console.log("商品列表请求成功", result); // 10

        // if(result.data.length == 0){
        //     finished.value = true;
        // }

        proList.value = [...proList.value, ...result.data]; // 原数据拼接新数据
        console.log(proList.value);

    } catch (err: any) {
        showFailToast(err.message);
    }
}

let onLoad = async () => {
    console.log("准备加载");

    pageParams.count++;

    await getProList();

    loading.value = false;

    if (pageParams.count >= 5) {
        finished.value = true;
    }



    // if (pageParams.count == 1) {
    //     // 页面还未加载数据 
    //     // getProList();
    // } else {
    //     pageParams.count++;
    // }
}

onMounted(() => {
    getBannerList();
    getProList();

})








</script>

<!-- 全局样式 -->
<style lang="scss" scoped>
.home-header {
    background-color: #ff5454 !important;
}

.search {
    background-color: transparent;
}
</style>
<style lang="scss" scoped>
.home {
    background-color: #f6f6f6;
}

.banner {
    width: 355px;
    // height: 150px;   
    margin: 10px auto;
    border-radius: 4px;
    overflow: hidden;

    img {
        width: 100%;
    }
}

.home-guild {
    width: 355px;
    margin: 10px auto;
}

.list {
    // display: flex;
    // flex-wrap: wrap;
    // justify-content: space-evenly;

    // css3 瀑布流
    padding: 0 15px;
    // 分几列
    column-count: 2;
    // 列间距
    column-gap: 10px;
    padding-bottom: 50px;
}

.list .list-item {
    width: 172px;
    background-color: #fff;
    margin-bottom: 10px;
}</style>